import { defineComponent, Teleport, ref, reactive } from "vue";
import styles from "./importTable.module.less";
import { InboxOutlined } from '@ant-design/icons-vue';
import type { UploadProps } from 'ant-design-vue';
// 导入
export default defineComponent({
  props: {
    // 标题
    title: {
      type: String,
      default: "导入表格",
    },
    // 导入模板名称
    downloadLabel: {
      type: String,
      required: true,
    },
    // 导入模板下载地址
    downloadUrl: {
      type: String,
      required: true,
    },
    // 上传地址
    uploadUrl: {
      type: String,
      required: true,
    },
  },
  setup(props: any, { slots }) {
    // 状态管理
    const state = reactive({
      fileList: [],
    } as any);
    // 弹窗显示
    const isShow = ref(false);

    const handleChange = (e: any) => { };
    const handleDrop = (e: any) => { };
    // 下载导入模板
    const downloadFile = () => {
      window.open(props.downloadUrl)
    };
    // 提交导入
    const uploadFile = () => {
      console.log(state.fileList)
    }
    // 提交前
    const beforeUpload: UploadProps['beforeUpload'] = file => {
      state.fileList = [file];
      return false;
    }
    const ImportTableUpload = () => (
      <>
        <a-button
          class="et-btn-success"
          type="primary"
          v-slots={{
            icon: () => slots.btnIcon?.()
          }}
          onClick={() => {
            isShow.value = true;
          }}
        >
          导入
        </a-button>
        <Teleport to="body">
          {isShow.value && (
            <div
              class={styles["parent-floating"]}
              onClick={() => {
                isShow.value = false;
                state.fileList = [];
              }}
            >
              <div
                class={styles["popup"]}
                onClick={(e: any) => {
                  e.stopPropagation();
                }}
              >
                <div class={styles["popup-title"]}>{props.title}</div>
                <div class={styles["upload-dragger"]}>
                  <a-upload-dragger
                    v-model={[state.fileList, "fileList"]}
                    name="file"
                    onChange={(e: any) => handleChange(e)}
                    onDrop={(e: any) => handleDrop(e)}
                    before-upload={beforeUpload}
                  >
                    <p class="ant-upload-drag-icon">
                      <InboxOutlined />
                    </p>
                    <p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
                    <p class="ant-upload-hint">
                      支持单次上传。严格禁止上传公司数据或其他标注栏文件
                    </p>
                  </a-upload-dragger>
                </div>
                <a-button type="link" block onClick={() => { downloadFile() }}>下载导入模版《{props.downloadLabel}》</a-button>
                <a-button class="et-btn-warning" type="primary" onClick={() => { uploadFile() }}>上传服务器</a-button>
              </div>
            </div>
          )}
        </Teleport>
      </>
    );
    return () => <ImportTableUpload />;
  },
});
